<script setup lang="ts">
import { RouterView } from 'vue-router'
import { onMounted, watch } from 'vue'
import { useAppStore } from './stores/counter'

const appStore = useAppStore()

// 监听主题变化，更新HTML类名
watch(() => appStore.theme, (newTheme) => {
  if (newTheme === 'dark') {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}, { immediate: true })

onMounted(() => {
  appStore.initializeSettings()
})
</script>

<template>
  <div id="app">
    <RouterView />
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #1f2937;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
  background-color: #111827;
  color: #f9fafb;
}

#app {
  min-height: 100vh;
}

/* Element Plus 暗色主题适配 */
.dark .el-button {
  --el-button-text-color: #f9fafb;
  --el-button-bg-color: #374151;
  --el-button-border-color: #4b5563;
}

.dark .el-card {
  --el-card-bg-color: #1f2937;
  --el-card-border-color: #374151;
}

.dark .el-input {
  --el-input-bg-color: #374151;
  --el-input-border-color: #4b5563;
  --el-input-text-color: #f9fafb;
}

.dark .el-select {
  --el-select-input-color: #f9fafb;
}

.dark .el-tabs__item {
  color: #d1d5db;
}

.dark .el-tabs__item.is-active {
  color: #3b82f6;
}
</style>
